@import './theme.scss';

// 颜色定义
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f9f9f9;
  --vt-c-white-mute: #f1f1f1;
  --vt-c-black: #1a1a1a;
  --vt-c-black-pure: #000000;
  --vt-c-black-soft: #242424;
  --vt-c-black-mute: #2f2f2f;
  --vt-c-indigo: #213547;
  --vt-c-indigo-soft: #476582;
  --vt-c-indigo-light: #aac8e4;
  --vt-c-gray: #8e8e8e;
  --vt-c-gray-light-1: #aeaeae;
  --vt-c-gray-light-2: #c7c7c7;
  --vt-c-gray-light-3: #d1d1d1;
  --vt-c-gray-light-4: #e5e5e5;
  --vt-c-gray-light-5: #f2f2f2;
  --vt-c-gray-dark-1: #636363;
  --vt-c-gray-dark-2: #484848;
  --vt-c-gray-dark-3: #3a3a3a;
  --vt-c-gray-dark-4: #282828;
  --vt-c-gray-dark-5: #202020;
  --vt-c-divider-light-1: rgba(60, 60, 60, .29);
  --vt-c-divider-light-2: rgba(60, 60, 60, .12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, .65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, .48);
  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, .7);
  --vt-c-text-light-3: rgba(60, 60, 60, .33);
  --vt-c-text-light-4: rgba(60, 60, 60, .18);
  --vt-c-text-light-code: var(--vt-c-indigo-soft);
  --vt-c-text-dark-1: rgba(255, 255, 255, .87);
  --vt-c-text-dark-2: rgba(235, 235, 235, .6);
  --vt-c-text-dark-3: rgba(235, 235, 235, .38);
  --vt-c-text-dark-4: rgba(235, 235, 235, .18);
  --vt-c-text-dark-code: var(--vt-c-indigo-light);
  --vt-c-green: #42b883;
  --vt-c-green-light: #42d392;
  --vt-c-green-lighter: #35eb9a;
  --vt-c-green-dark: #33a06f;
  --vt-c-green-darker: #155f3e;
  --vt-c-blue: #3b8eed;
  --vt-c-blue-light: #549ced;
  --vt-c-blue-lighter: #50a2ff;
  --vt-c-blue-dark: #3468a3;
  --vt-c-blue-darker: #255489;
  --vt-c-yellow: #ffc517;
  --vt-c-yellow-light: #ffe417;
  --vt-c-yellow-lighter: #ffff17;
  --vt-c-yellow-dark: #e0ad15;
  --vt-c-yellow-darker: #bc9112;
  --vt-c-red: #ed3c50;
  --vt-c-red-light: #f43771;
  --vt-c-red-lighter: #fd1d7c;
  --vt-c-red-dark: #cd2d3f;
  --vt-c-red-darker: #ab2131;
  --vt-c-purple: #de41e0;
  --vt-c-purple-light: #e936eb;
  --vt-c-purple-lighter: #f616f8;
  --vt-c-purple-dark: #823c83;
  --vt-c-purple-darker: #602960;
}

// 亮
:root {
  --vt-c-bg: var(--vt-c-white);
  --vt-c-bg-soft: var(--vt-c-white-soft);
  --vt-c-bg-mute: var(--vt-c-white-mute);
  // --vt-c-brand: var(--vt-c-green);
  // --vt-c-brand-light: var(--vt-c-green-light);
  // --vt-c-brand-dark: var(--vt-c-green-dark);
  --vt-c-divider: var(--vt-c-divider-light-1);
  --vt-c-divider-light: var(--vt-c-divider-light-2);
  --vt-c-divider-inverse: var(--vt-c-divider-dark-1);
  --vt-c-divider-inverse-light: var(--vt-c-divider-dark-2);
  --vt-c-text-1: var(--vt-c-text-light-1);
  --vt-c-text-2: var(--vt-c-text-light-2);
  --vt-c-text-3: var(--vt-c-text-light-3);
  --vt-c-text-4: var(--vt-c-text-light-4);
  --vt-c-text-code: var(--vt-c-text-light-code);
  --vt-c-text-inverse-1: var(--vt-c-text-dark-1);
  --vt-c-text-inverse-2: var(--vt-c-text-dark-2);
  --vt-c-text-inverse-3: var(--vt-c-text-dark-3);
  --vt-c-text-inverse-4: var(--vt-c-text-dark-4);
  --vt-c-brand-highlight: var(--vt-c-brand-dark);
  --vt-c-bg-front: rgba(255, 255, 255, .3);
  --vt-c-bg-back: rgba(255, 255, 255, .6);
  --screen-linear-top: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  --screen-linear-left: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, .6) 0%,
    rgba(255, 255, 255, .1) 30%,
    rgba(255, 255, 255, 0) 100%
  );
  --screen-bg-url: none;
  @each $t in $themes {
    .#{$t} {
      --vt-c-brand: #{map-get($themes-color-800, $t)}; 
      --vt-c-brand-light: #{map-get($themes-color-700, $t)}; 
      --vt-c-brand-dark: #{map-get($themes-color-900, $t)}; 
      --vt-c-bg-soft: #{rgba(lighten(map-get($themes-color-700, $t), 80%), 50%)}; 
      --vt-c-bg-mute: #{rgba(map-get($themes-color-700, $t), 30%)}; 
      --screen-bg-url: #{map-get($themes-bgimage, $t)};
    }
    .normal {
      --vt-c-bg-front: #fff; 
      --vt-c-bg-back: #efeff3; 
    }
  }
}

// 暗
.dark {
  --vt-c-bg: var(--vt-c-black);
  --vt-c-bg-soft: var(--vt-c-black-soft);
  --vt-c-bg-mute: var(--vt-c-black-mute);
  --vt-c-divider: var(--vt-c-divider-dark-1);
  --vt-c-divider-light: var(--vt-c-divider-dark-2);
  --vt-c-divider-inverse: var(--vt-c-divider-light-1);
  --vt-c-divider-inverse-light: var(--vt-c-divider-light-2);
  --vt-c-text-1: var(--vt-c-text-dark-1);
  --vt-c-text-2: var(--vt-c-text-dark-2);
  --vt-c-text-3: var(--vt-c-text-dark-3);
  --vt-c-text-4: var(--vt-c-text-dark-4);
  --vt-c-text-code: var(--vt-c-text-dark-code);
  --vt-c-text-inverse-1: var(--vt-c-text-light-1);
  --vt-c-text-inverse-2: var(--vt-c-text-light-2);
  --vt-c-text-inverse-3: var(--vt-c-text-light-3);
  --vt-c-text-inverse-4: var(--vt-c-text-light-4);
  --vt-c-brand-highlight: var(--vt-c-brand-light);
  --vt-c-bg-front: rgba(0, 0, 0, .5);
  --vt-c-bg-back: rgba(0, 0, 0, .5);
  --screen-linear-top: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, .5) 0%,
    rgba(0, 0, 0, .5) 100%
  );
  --screen-linear-left: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, .6) 0%,
    rgba(0, 0, 0, .3) 100%
  );
  @each $t in $themes {
    .#{$t} {
      --vt-c-brand: #{map-get($themes-color-200, $t)}; 
      --vt-c-brand-light: #{map-get($themes-color-100, $t)}; 
      --vt-c-brand-dark: #{map-get($themes-color-300, $t)}; 
      --vt-c-bg-soft: #{rgba(darken(map-get($themes-color-700, $t), 35%), 50%)}; 
      --vt-c-bg-mute: #{rgba(map-get($themes-color-700, $t), 30%)};
      --screen-bg-url: #{map-get($themes-bgimage, $t)};
    }
    .normal {
      --vt-c-bg-front: #18222d; 
      --vt-c-bg-back: #213040;  
    }
  }
}
